<script setup>
import { ElMessage } from "element-plus";
import Layer from "@/components/layer/index.vue";
import { defineProps, ref, defineEmits } from "vue";
import { addAPI, updateAPI, redeem } from "@/api/wedding/orderInfo";

// 使用defineEmits来接收来自父组件的方法
const emit = defineEmits(["getTableData"]);
// 声明props
const props = defineProps({
  layer: {
    type: Object,
    default: () => {
      return {
        show: false,
        title: "",
        showButton: true,
      };
    },
  },
});

/************************************定义变量************************************************/
const ruleForm = ref(null);
const layerDom = ref(null);
const rules = {
  // id: [{ required: true, message: '请输入标识', trigger: 'blur' }],
  // userId: [{ required: true, message: '请输入用户id', trigger: 'blur' }],
  // productId: [{ required: true, message: '请输入商品id', trigger: 'blur' }],
  // code: [{ required: true, message: '请输入订单编号', trigger: 'blur' }],
  // type: [{ required: true, message: '请输入订单类型 0：服务订单  1：商品订单', trigger: 'blur' }],
  // amount: [{ required: true, message: '请输入付款金额', trigger: 'blur' }],
  // orderAmount: [{ required: true, message: '请输入订单金额', trigger: 'blur' }],
  // status: [{ required: true, message: '请输入状态 0：待付款  1：待完成/待取货   2：已完成  3：已取消', trigger: 'blur' }],
  // redeemCode: [{ required: true, message: '请输入兑换码', trigger: 'blur' }],
  // agreementTime: [{ required: true, message: '请输入预约下单日期', trigger: 'blur' }],
  // contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  // phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  // arrivalTime: [{ required: true, message: '请输入酒店到店时间', trigger: 'blur' }],
  // subscribeTime: [{ required: true, message: '请输入酒店预约时间', trigger: 'blur' }],
  // payType: [{ required: true, message: '请输入付款方式 0：微信支付  1：余额支付', trigger: 'blur' }],
  // payStatus: [{ required: true, message: '请输入付款状态 0：待支付 1：已支付 2：已取消', trigger: 'blur' }],
  // createTime: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
  // updateTime: [{ required: true, message: '请输入修改时间', trigger: 'blur' }],
  // delFlag: [{ required: true, message: '请输入删除标识：0:未删除  1:已删除', trigger: 'blur' }],
};
let form = ref({
  id: null,
  userId: null,
  productId: null,
  code: null,
  type: null,
  amount: null,
  orderAmount: null,
  status: null,
  redeemCode: null,
  agreementTime: null,
  contact: null,
  phone: null,
  arrivalTime: null,
  subscribeTime: null,
  payType: null,
  payStatus: null,
  createTime: null,
  updateTime: null,
  delFlag: null,
});

/************************************数据回显************************************************/
if (props.layer.row) {
  if (props.layer.row) {
    let source = props.layer.row;
    Object.keys(form.value).forEach((k) => k in source && (form.value[k] = source[k]));
  }
}

/************************************定义事件************************************************/
//提交按钮事件
let submit = () => {
  if (props.layer.title == "核销订单") {
    console.log("[ redeemparamsredeemparamsredeemparamsredeemparams ] >", form.value);
    redeemCode(form.value);
    return;
  } else {
    props.layer.show = false;
    return;
  }
  // if (ruleForm) {
  //   ruleForm.value.validate((valid) => {
  //     if (valid) {
  //       let params = form.value
  //       if (props.layer.row) {
  //         updateForm(params)
  //       } else {
  //         addForm(params)
  //       }
  //     } else {
  //       return false;
  //     }
  //   });
  // }
};

let redeemCode = (params) => {
  console.log("[ params.redeemCode ] >", params.redeemCode);
  redeem(params.redeemCode).then((res) => {
    if (res.code != 0) {
      ElMessage({
        type: "error",
        message: res.message,
      });
    } else {
      ElMessage({
        type: "success",
        message: "核销成功",
      });
    }
    props.layer.show = false;
  });
};
let updateForm = (params) => {
  updateAPI(params).then((res) => {
    ElMessage({
      type: "success",
      message: "编辑成功",
    });
    emit("getTableData", false);
    layerDom && layerDom.value.close();
  });
};

let addForm = (params) => {
  addAPI(params).then((res) => {
    ElMessage({
      type: "success",
      message: "新增成功",
    });
    emit("getTableData", true);
    layerDom && layerDom.value.close();
  });
};
</script>

<template>
  <Layer :layer="layer" @confirm="submit" ref="layerDom">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      style="margin-right: 30px"
      v-if="layer.title == '核销订单'"
    >
      <el-form-item label="核销码：" prop="redeemCode">
        <el-input v-model="form.redeemCode" placeholder="请输入核销"></el-input>
      </el-form-item>
    </el-form>
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      style="margin-right: 30px"
      v-if="layer.title != '核销订单'"
    >
      <el-form-item label="订单编号：" prop="code">
        <el-input v-model="form.code" placeholder="请输入订单编号" disabled></el-input>
      </el-form-item>
      <el-form-item label="订单类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择订单类型" disabled>
          <el-option label="服务订单" value="0"></el-option>
          <el-option label="商品订单" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付款金额：" prop="amount">
        <el-input-number
          size="large"
          v-model="form.amount"
          :precision="2"
          :step="0.1"
          disabled
        >
          <template #suffix><span>元</span></template>
        </el-input-number>
      </el-form-item>
      <el-form-item label="订单金额：" prop="orderAmount">
        <el-input-number
          size="large"
          v-model="form.orderAmount"
          :precision="2"
          :step="0.1"
          disabled
        >
          <template #suffix><span>元</span></template>
        </el-input-number>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择状态" disabled>
          <el-option label="待付款" value="0"></el-option>
          <el-option label="待完成/待取货" value="1"></el-option>
          <el-option label="已完成" value="2"></el-option>
          <el-option label="已取消" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预约下单日期：" prop="agreementTime">
        <el-input
          v-model="form.agreementTime"
          placeholder="请输入预约下单日期"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="联系人：" prop="contact">
        <el-input v-model="form.contact" placeholder="请输入联系人" disabled></el-input>
      </el-form-item>
      <el-form-item label="联系方式：" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入联系方式" disabled></el-input>
      </el-form-item>
      <el-form-item label="酒店到店时间：" prop="arrivalTime">
        <el-input
          v-model="form.arrivalTime"
          placeholder="请输入酒店到店时间"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="酒店预约时间：" prop="subscribeTime">
        <el-input
          v-model="form.subscribeTime"
          placeholder="请输入酒店预约时间"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="付款方式" prop="payType">
        <el-select v-model="form.payType" placeholder="请选择付款方式" disabled>
          <el-option label="微信支付" value="0"></el-option>
          <el-option label="余额支付" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="付款状态" prop="payStatus">
        <el-select v-model="form.payStatus" placeholder="请选择付款状态" disabled>
          <el-option label="待支付" value="0"></el-option>
          <el-option label="已支付" value="1"></el-option>
          <el-option label="已取消" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间：" prop="createTime">
        <el-input
          v-model="form.createTime"
          placeholder="请输入创建时间"
          disabled
        ></el-input>
      </el-form-item>
    </el-form>
  </Layer>
</template>

<style scoped lang="scss">
.el-input-number--large {
  line-height: 38px;
  width: 230px;
}
</style>
